<template>
  <div>
    <div id="centreRight2Chart1"></div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      chart: null,
      xitem1: [], //x轴数据
      yval1:[12,9,120, 187, 161,5],//船舶垃圾data
      yval2:[2,154.197,399,164,4,11], //生活污水data
      company_id:''
    };
  },
  mounted() {
    this.getData()
  },
  props: {
    selectProp: {
      type: String,
      required: true
    }
  },
  watch:{
    selectProp:{
      handler(n){
        console.log('centreRight2Chart1获取父组件的参数： ' + n)
        this.company_id = n
        this.getData()
      },
      deep:true// 深度监听父组件传过来对象变化
    }
  },
  methods: {
    //近6个月搜次数据
    getData(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryCountByMonth?companyId=' + this.company_id).then((response)=>{
        this.xitem1 = response.data.data.date1
        this.yval1 = response.data.data.num1
        this.yval2 = response.data.data.num2
        this.draw();
      })
    },
    draw() {
      const xitem1 = this.xitem1
      const yval1 = this.yval1
      const yval2 = this.yval2
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreRight2Chart1"));
      //  ----------------------------------------------------------------

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b"
            }
          }
        },
        // 图例组件
        legend: {
          orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                     // 'horizontal' ¦ 'vertical'
          x: 'center',               // 水平安放位置，默认为全图居中，可选为：
                                     // 'center' ¦ 'left' ¦ 'right'
                                     // ¦ {number}（x坐标，单位px）
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: '#ccc',       // 图例边框颜色
          borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
          padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
                                     // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                     // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 10,             // 图例图形宽度
          itemHeight: 10,            // 图例图形高度
          bottom: '2%',               //下面距离
          textStyle: {
            color: 'white',// 图例文字颜色
            fontSize:18
          }
        },
        //网格容器,可以控制图表大小
        grid: {
          left: '4%',
          right: '6%',
          bottom: '12%',
          top: '4%',
          containLabel: true
        },

        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false, //不显示x轴的线
            lineStyle: {
              color: "rgba(255,255,255,.9)",
            },
          },
          data: xitem1
        }],

        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.9)",
                // fontSize: 12
              }
            },

            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "船舶垃圾",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "rgba(250,98,46,0.8)",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "rgba(250,98,46,0.3)"
                          },
                          {
                            offset: 0.8,
                            color: "rgba(150, 132, 213, 0.4)"
                          }
                        ],
                        false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(250,98,46,0.8)",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
              }
            },
            data:yval1
          },
          {
            name: "生活污水",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "rgba(0, 216, 135, 0.4)"
                          },
                          {
                            offset: 0.8,
                            color: "rgba(0, 216, 135, 0.1)"
                          }
                        ],
                        false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            itemStyle: {
              normal: {
                color: "#00d887",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12
              }
            },
            data: yval2
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
#centreRight2Chart1 {
  width: 100%;
  height: 280px;
  margin: 0 auto;
}
</style>
